import React, { Component } from 'react'
import './5_Slider.css';
export default class Slider extends Component {
  //声明 state
  state = {
    index: 0,
    images: [
      '/images/124121151.jpg',
      '/images/1512521511.jpg',
      '/images/aaefjwaiofjwaio.jpg',
      '/images/afwefawefwaeiofaw.jpg',
      '/images/qji23oj51oo5j125.jpg',
    ]
  } 
  
  //声明点击下一张的事件回调
  next = () => {
    //获取当前的状态值
    let {index, images} = this.state;
    //判断
    if(index >= images.length - 1){
      index = 0;
    }else{
      index += 1;
    }
    this.setState({
      index: index
    })
  }

  //声明点击上一张的事件回调
  prev = () => {
    //获取当前的状态值
    let {index, images} = this.state;
    //判断
    if(index <= 0){
      index = images.length - 1;
    }else{
      index -= 1;
    }
    this.setState({
      index
    });
  }

  render() {
    //解构赋值
    let {images, index} = this.state;
    return (
      <div className='slider-wrapper'>
        <img width="100%" src={images[index]} alt="" />
        <div className="prev btn" onClick={this.prev}>&lt;</div>
        <div className="next btn" onClick={this.next}>&gt;</div>
      </div>
    )
  }
}
